import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    Button,
    Image,
    TouchableOpacity,
    ScrollView,
    Alert
} from 'react-native';
import NavigationBar from '../../common/NavigationBar';

import ViewUtils from '../../common/util/ViewUtils';
import LanguageDao,{FLAG_LANGUAGE} from '../../expand/dao/LanguageDao';
import CheckBox from 'react-native-check-box';
import ArrayUtils from '../../common/util/ArrayUtils';
export default class CustomKeyPage extends Component {
    constructor(props){
        super(props)
        this.languageDao = new LanguageDao(this.props.navigation.state.params.fatherParams.flag);
        this.chanageValues = [];
        this.state = {
            dataArray:[]
        }
    }
    onSave(){
        if(this.chanageValues.length===0) {
            this.props.navigation.pop();
            return;
        }
        this.languageDao.save(this.state.dataArray);
        this.props.navigation.pop();
    }
    componentDidMount(){
        this.loadData();
    }
    loadData(){
        this.languageDao.fetchData()
            .then(result=>{
                this.setState({
                    dataArray: result
                })
            })
            .catch(error=>{
                console.log(error)
            })
    }
    renderView(){
        if(!this.state.dataArray || this.state.dataArray.length ===0)return null;
        let len = this.state.dataArray.length;
        let views = []; //存储所有的行
        for (let i=0,l=len-2;i<l;i+=2) {
            views.push(
                <View key={i}>
                    <View style={styles.item}>
                        {this.renderCheckBox(this.state.dataArray[i])}
                        {this.renderCheckBox(this.state.dataArray[i+1])}
                    </View>
                    <View style={styles.line}></View>
                </View>
            )
        }
        views.push(
            <View key={len-1}>
                <View style={styles.item}>
                    {len%2 === 0 ? this.renderCheckBox(this.state.dataArray[len-2]) : null}
                    {this.renderCheckBox(this.state.dataArray[len-1])}
                </View>
                <View style={styles.line}></View>
            </View>
        )
        return views;
    }
    onClick(data){
        data.checked = !data.checked;
        ArrayUtils.updateArray(this.chanageValues, data);
    }
    renderCheckBox(data){
        let leftText = data.name;
        return (
            <CheckBox
                style={{flex:1, padding:10}}
                onClick={()=>{this.onClick(data)}}
                leftText = {leftText}
                isChecked={data.checked}
                checkedImage={<Image style={{tintColor: '#6495ED'}} source={require('../../res/images/ic_check_box.png')}/>}
                unCheckedImage={<Image style={{tintColor: '#6495ED'}} source={require('../../res/images/ic_check_box_outline_blank.png')}/>}
            />
        )
    }
    onBack(){
        if(this.chanageValues.length === 0 ) {
            this.props.navigation.pop();
            return;
        }
        Alert.alert(
            '提示',
            '要保存修改吗?',
            [
                {text: '不保存', onPress:()=>{
                    this.props.navigation.pop();
                }, style:'cancel'},
                {text: '保存', onPress:()=>{
                        this.onSave()
                }}
            ]
        )
    }
    render(){
        let title = this.props.navigation.state.params.fatherParams.flag === FLAG_LANGUAGE.flag_language ? "自定义语言" : "自定义标签";
        let rightButton = <TouchableOpacity
            onPress={()=>{
                this.onSave();
            }}
        >
            <View style={{margin: 10}}>
                <Text style={styles.title}>保存</Text>
            </View>
        </TouchableOpacity>
        return (
            <View style={styles.container}>
                <NavigationBar
                    statusBar={{
                        backgroundColor:'#6495ED'
                    }}
                    title={title}
                    style = {{
                        backgroundColor: '#6495ED'
                    }}
                    leftButton={
                        ViewUtils.getLeftButton(()=>{
                            this.onBack();
                        })
                    }
                    rightButton={
                        rightButton
                    }
                />
                <ScrollView>
                    {this.renderView()}
                </ScrollView>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        flex:1,
        backgroundColor: 'white'
    },
    tips: {
      fontSize: 18
    },
    title: {
        fontSize: 18,
        color: 'white'
    },
    line: {
        height:0.3,
        backgroundColor: 'darkgray'
    },
    item: {
        flexDirection: 'row',
        alignItems: 'center'
    }
});